<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    #box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position:absolute;
    }
    #box2{
      width: 100px;
      height: 100px;
      background-color: green;
      position:absolute;
      left: 200px;
      top: 200px;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var box1 = document.getElementById("box1");
      var box2 = document.getElementById("box2");
      // box1拖拽
      drag(box1);
      // box2拖拽
      drag(box2);
    
    };
    /**
     * 拖拽函数
     *    参数：obj为拖拽的元素
    */
    function drag(obj){
       // 1.鼠标按下时才可以移动盒子
       obj.onmousedown = function(event){
        /**
         * 设置box捕获所有鼠标按下的事件
         * setCapture()
         *    只有IE支持，若chrome调用会报错
        */
       if(obj.setCapture){
        obj.setCapture();
       }

        event = event || window.event;
        // 获取鼠标相对于div的偏移量
        var xOffset = event.clientX - obj.offsetLeft;
        var yOffset = event.clientY - obj.offsetTop;
        // 2.让盒子跟随鼠标移动，此处是盒子根据鼠标在文档中的位置移动
        document.onmousemove = function(event){
            event = event || window.event;
            // 获取坐标
            var x = event.clientX - xOffset;
            var y = event.clientY - yOffset;
            obj.style.left = x + "px";
            obj.style.top = y + "px";
        }
        // 3.鼠标松开时，停止移动
        document.onmouseup = function(){
          // 取消鼠标移动事件
          document.onmousemove = null;
          // 取消鼠标松开事件
          document.onmouseup = null;
          // 当鼠标松开时，取消事件的捕获
          obj.releaseCapture && box1.releaseCapture();
        }
        /**
         * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
         *    此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
         *    若不希望发生该行为，可通过return false来取消默认行为
         *    该方法在IE8及以下不生效
        */
       return false;
      }
    }
  </script>
</head>
<body >
  这是一段文字
  <div id="box1"></div>
  <div id="box2"></div>
</body>
</html>